<template>
    <span :class="label?'sel-span':''">
        <span v-if="label">{{label}} :</span>
        <el-tooltip placement="right" title="股票信息" trigger="hover" effect="light">
            <div slot="content" style="line-height:18px;" v-if="selInfo && selInfo.code" class="infoArea">
                <el-row><el-col :span="4" class="right">代码 :&nbsp;</el-col><el-col :span="17"> {{selInfo.code}}</el-col></el-row>
                <el-row><el-col :span="4" class="right">名称 :&nbsp;</el-col><el-col :span="17"> {{selInfo.name}}</el-col></el-row>
                <el-row><el-col :span="4" class="right">市场 :&nbsp;</el-col><el-col :span="17"> {{selInfo.marketName}}</el-col></el-row>
            </div>
            <el-select v-model="code" @keyup.enter.native="onEnter" v-bind="$attrs" v-on="$listeners" 
                style="width: 250px;" :style="$attrs.elstyle" @change="onChange" @blur="onBlur"
                clearable  filterable remote placeholder="搜索股票" :remote-method="remoteMethod">
                <div slot="prefix">
                    <i class="el-icon-s-marketing el-input__icon"> </i>
                </div>
                <el-option v-for="(item,idx) in options" :key="idx" :label="item.name+' ('+item.code+')'" :value="item.code"> </el-option>
            </el-select>
        </el-tooltip>
    </span>
    
</template>


<script>


export default {
    props:["label","value","type"],
    data() {
        return {
            code : this.value || "",
            options: [],
            selInfo : {},
        }
    },

    mounted() {

    },
    computed: {
    },
    watch:{
    },
    inject: [],
    methods: {
        remoteMethod(query,cb) {
            this.code = "";
            this.$emit('input',this.code);
            this.options = [];
            this.$axios.get(`http://searchapi.eastmoney.com/api/suggest/get?input=${query}&type=14&token=D43BF722C8E33BDC906FB84D85E326E8&count=10&`+Math.random())
            .then((res) => {
                try{
                    if(!res.data || !res.data.QuotationCodeTable) return;
                    var tmplist = res.data.QuotationCodeTable.Data;
                    tmplist.map((item)=>{
                        if(item.SecurityType==1){
                            item.type="stock"
                        }else if(item.SecurityType==2 || item.SecurityType==8 || item.SecurityType==25){
                            item.type="stock"
                        }else if(item.SecurityType==17){
                            // item.type="jj"
                        }else if(item.SecurityType==9){
                            // item.type="bk"
                        }
                        if(!item.type) return;
                        this.options.push({
                            code: item.Code,
                            name: item.Name,
                            type: item.type,
                            marketType: item.MarketType,
                            marketName: item.SecurityTypeName,
                        })
                    })
                }catch(ex){
                    this.$message.error(ex.message);
                }
            }).catch(err=>{
                this.loading = false;
            })
        },
        onEnter(){
            this.onBlur();
            this.$nextTick(()=>{
                if(this.playerNo){
                    this.$emit("onEnter");
                }
            })
        },
        onBlur(){
            if(this.options.length>0 && !this.code){
                this.code = this.options[0].code
                this.onChange();
            }
        },
        onChange() {
            this.setPlayerInfo();
            this.$emit('input',this.code);
            // this.$emit("change");
            this.$emit("onSelPlayer",this.selInfo);
        },
        getPlayerInfo(){
            return this.selInfo;
        },
        setPlayerInfo(){
            var info = {};
            this.options.map(item=>{
                if(item.code == this.code) info = item;
            })
            return this.selInfo = info;
        }
    }
}
</script>

<style lang="less" scoped>
    .sel-span{
        display: inline-block;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 5px;
        >span{
            display: inline-block;
            white-space: nowrap;
            color:gray;
            font-size: 15px;
        }
    }
    .infoArea{
        width: 300px;
    }
</style>